<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TAB切换</title>
	<meta name="keywords" content="" />
	<meta name="Description" content="" />
	<style>
		*{margin:0;padding:0;}
		ul,ol {list-style-type:none;}
		#nav,#nav1{width:800px;height:50px;border:1px solid #ccc;margin:0 auto;}
		#nav li,#nav1 li {float:left;width:198px;height:50px;line-height:50px;border-left:1px solid #ccc;border-right:1px solid #ccc;text-align:center;}
		#con,#con1 {clear:both;width:800px;height:100px;border:1px solid #ccc;margin:0 auto;}
		#con li,#con1 li {width:800px;height:100px;display:none;text-align:center;font-size:30px;}
		#nav .hover,#nav1 .hover {background:#ccc;}
		#con .show,#con1 .show {display:block;}
	</style>
	<script language="javascript">
	window.onload=function(){
	//通用
	function $(id){return typeof id=="string"?document.getElementById(id):id;}
	function $$(id,tagname){return typeof id=="string"?document.getElementById(id).getElementsByTagName(tagname):id.getElementsByTagName(tagname);}
	//tab切换开始
	//为每个按钮定义监听事件.触发事件后执行换className的函数。
	function aaa(tabnav,tabcon){
		for (i=0;i<$$(tabnav,"li").length ;i++ )
		{
			addEventHandler($$(tabnav,"li")[i],"mouseover",function(){
				for (i=0;i<$$(tabnav,"li").length ;i++ )
				{
					var tabnavn=$$(tabnav,"li")[i],tabconn=$$(tabcon,"li")[i];
					tabnavn.className=tabnavn==this?"hover":"";
					tabconn.className=tabnavn==this?"show":"";
				}
			});
		}
	}
	//监听事件函数
	function addEventHandler(oTarget,sEventType,fnHandler){
		if(oTarget.addEventListener){
			//alert("1");
			oTarget.addEventListener(sEventType,fnHandler,false);
		}
		else{
			//alert("2");
			oTarget["on"+sEventType]=fnHandler;
		}
	}
	//调用tab切换
	aaa("nav","con");
	aaa("nav1","con1");
	}
	
	</script>
</head>
<body>
	<ul ID="nav">
		<li class="hover">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<ol ID="con">
		<li class="show">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
	<ul ID="nav1">
		<li class="hover">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<ol ID="con1">
		<li class="show">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
</body>
</html>